import React, { Component } from "react";
import { BrowserRouter, NavLink, Route, Prompt } from "react-router-dom";
export default class index extends Component {
  render() {
    return (
      <BrowserRouter>
        {/* 导航 */}
        <nav style={{ fontSize: "40px", display: "flex", justifyContent: "space-evenly" }}>
          <NavLink to="/home">首页</NavLink>
          <NavLink
            to={{
              pathname: "/member",
              state: {
                name: "小明",
                age: 18
              }
            }}>
            会员
          </NavLink>
          <NavLink to="news">新闻页</NavLink>
        </nav>
        {/* 线路 */}
        <main>
          {/* 拦截器1.基础的使用认识 */}
          {/* <Prompt when={false} message="您真的打算去吗？" /> */}
          {/* 拦截器2.去往下一个路由的拦截 
            Prompt:message接收一个函数，该函数两个参数，第一个是location，是指的下一个路由的信息，cation是本次路由动作的类型，比如push等
          */}
          <Prompt
            message={(location, action) => {
              console.log(location);
              console.log(action);
              if (location.pathname === "/member") {
                const d = window.confirm("您是会员吗？");
                return d;
              }
              return true;
            }}
          />
          <Route path="/home" component={() => <div>我是首页</div>} />
          <Route path="/member" component={() => <div>我是会员</div>} />
          <Route path="/news" component={() => <div>我是新闻</div>} />
        </main>
      </BrowserRouter>
    );
  }
}
